<template>
  <div class="background-processer">
    <StylUpload
      ref="stylUploadRef"
      v-if="!props.value"
      @success="stylUploadHandleSuccess"
    >
      <template #content>
        <div class="background-processer__upload">
          <plus-outlined></plus-outlined>
          <div>点击上传图片</div>
        </div>
      </template>
    </StylUpload>
    <ImageSuccess
      v-else
      :value="props.value"
      :show-delete="true"
      change-type="page"
      @change="imageSuccessHandle"
    />
  </div>
</template>

<script setup lang="ts">
import StylUpload from '../stylUpload.vue'
import { message } from 'ant-design-vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import ImageSuccess from '@/components/ImageSuccess.vue'
import { ref } from 'vue'
import { getImageInfo } from '@/helper'
import useEditorStore from '@/store/modules/editorStore'
interface IProcesserProps {
  value: string
}
interface IStylUploadSuccess {
  res: {
    data: string[]
  }
  file: File
  fileList: File[]
}
const props = defineProps<IProcesserProps>()
const emits = defineEmits(['change'])
const { changePageData } = useEditorStore()
const stylUploadRef = ref()
const stylUploadHandleSuccess = (data: IStylUploadSuccess) => {
  const { res } = data
  if (res.data && res.data.length > 0) {
    getImageInfo(data.file).then(({ height }) => {
      const minHeight = 560
      const pageHeight = height < minHeight ? minHeight : height
      setTimeout(() => {
        changePageData({ key: 'height', value: pageHeight + 'px' })
      }, 320)
    })
    emits('change', res.data[0])
  }

  message.success('上传成功')
}
const imageSuccessHandle = (data: string) => {
  emits('change', data)
  message.success('修改 成功')
}
</script>

<style scoped lang="scss">
.background-processer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .background-processer__upload {
    width: 120px;
    height: 120px;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &:hover {
      border-color: #1890ff;
    }
  }
}
</style>
